import React from 'react';
import { Form, Input, Button } from 'antd';
import { connect } from 'react-redux';

import styles from './styles.module.less';

const mapStateToProps = state => ({ user: state.user });
const mapDispatchToProps = dispatch => ({ updateInfo: dispatch.user.updateInfo });

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(({ user, updateInfo }) => {
    return (
        <div className={ styles.container }>
            <div className={ styles.title }>个人信息</div>
            <Form
                initialValues={ user }
                onFinish={ updateInfo }
                className={ styles.form }
                labelCol={{span: 4,offset: 4}}
                wrapperCol={{span: 10}}>
                <Form.Item label="用户名" name="username">
                    <Input placeholder="输入用户名"/>
                </Form.Item>
                <Form.Item label="姓名" name="name">
                    <Input placeholder="输入姓名"/>
                </Form.Item>
                <Form.Item label="权限" name="role">
                    <Input disabled />
                </Form.Item>
                <Form.Item label="地址" name="address">
                    <Input placeholder="输入地址信息"/>
                </Form.Item>
                <Form.Item label="所属单位" name="unitName">
                    <Input placeholder="输入所属单位"/>
                </Form.Item>
                <Form.Item className={ styles.btnsContainer }  wrapperCol={{span: 16,offset:4}}>
                    <Button htmlType="submit" className={ styles.btn }>提交</Button>
                    <Button className={ styles.btn }>重置</Button>
                </Form.Item>
            </Form>
        </div>
    )
})